<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>登录</title>
	<base href="../../../" />
	<script src="lib/function/responsive.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="static/css/api.css" />
	<style>
		html,
		body,
		.login {
			height: 100%;
			width: 100%;
		}

		body {
			background: url(static/icon/login-back.jpg) no-repeat center;
			background-size: cover;
		}

		/* .login{
				display: flex;
				align-items: center;
				justify-content: center;
			} */
		/* .login-con{
				width: 6.69rem;
				height: 5.09rem;
				background-color: #ffffff;
				box-shadow: 0rem 0rem 0.17rem 0.04rem 
					rgba(15, 101, 188, 0.45);
				border-radius: 0.1rem;
				background-color: #fff;
			} */
		.login-con {
			position: fixed;
			width: 7.3rem;
			height: 4.09rem;
			top: 2.5rem;
			left: 5.55rem;
			background-color: #ffffff;
			box-shadow: 0rem 0rem 0.17rem 0.04rem rgba(15, 101, 188, 0.45);
			border-radius: 0.1rem;
			background-color: #fff;
		}

		.login-con.active {
			top: 2.2rem;
		}

		/* 密码登录 */
		.pwd-con {}

		.pwd-top {
			padding: 0.1rem;
			overflow: hidden;
		}

		.pwd-top .codelogin {
			width: 0.9rem;
			height: 0.77rem;
			background-color: #ffffff;
			position: relative;
			float: right;
			background: url(static/icon/erweima.png) no-repeat right;
			background-size: cover;
		}

		.pwd-top .codelogin .txt {
			font-family: MicrosoftYaHei;
			font-size: 0.22rem;
			color: #fa9029;
			border: solid 1px #f8976d;
			position: absolute;
			min-width: 1.98rem;
			padding: 0 0.1rem;
			height: 0.42rem;
			display: flex;
			justify-content: center;
			align-items: center;
			left: -2rem;
			text-align: center;
			top: 0.2rem;
		}

		.pwd-top .codelogin .txt::after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			bottom: 0;
			right: -4px;
			margin: auto 0;
			background-color: #fdfced;
			width: 5px;
			height: 5px;
			border-top: solid 1px #f8976d;
			border-right: solid 1px #f8976d;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* Internet Explorer */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			/* Opera */
			z-index: 5;
		}

		.pwd-form {
			padding: 0 0.64rem;

		}

		.pwd-form .form-lis {
			width: 5.41rem;
			height: 0.7rem;
			border-radius: 0.02rem;
			margin-bottom: 0.2rem;
			padding-left: 0.64rem;
			background: url(static/icon/phone.png) no-repeat left 0.18rem center;
			background-size: 0.28rem;
			background-color: #f3f6ff;
		}


		.pwd-form .form-lis input {
			height: 100%;
			width: 4.5rem;
		}

		.pwd-form .form-lis-psd {
			background: url(static/icon/password.png) no-repeat left 0.18rem center;
			background-size: 0.28rem;
			background-color: #f3f6ff;
		}

		.pwd-form .form-lis-psd input {}

		.pwd-form .form-lis-code {
			box-sizing: border-box;
			background: none;
			height: 0.7rem;
			padding: 0;
		}

		.pwd-form .form-lis-code input {
			padding: 0 0.2rem;
			width: 2.71rem;
			height: 0.7rem;
			background-color: #f3f6ff;
			float: left;

		}

		.pwd-form .form-lis-code #captcha {
			width: 2.23rem;
			height: 0.7rem;
			/* background-color: #2691ff; */
			float: right;
		}

		.sub-btn {
			width: 5.39rem;
			height: 0.76rem;
			background-color: #2691ff;
			border-radius: 0.05rem;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: MicrosoftYaHei;
			color: #ffffff;
			font-size: 0.26rem;
			margin-top: 0.35rem;
		}

		.sub-btn:active {
			opacity: 0.5;
		}

		/* 扫码登录 */
		.code-con {
			padding: 0 0.38rem;
		}

		.code-con .login-tit {
			font-family: MicrosoftYaHei;
			font-size: 0.26rem;
			line-height: 0.9rem;
			color: #333333;
		}

		.code-con .login-code {
			width: 2.75rem;
			height: 2.75rem;
			background-color: #ffffff;
			box-shadow: 0rem 0rem 0.17rem 0.04rem rgba(205, 205, 205, 0.45);
			/* padding: 0.15rem; */
			box-sizing: border-box;
			margin: 0 auto;
		}

		.code-con .login-code img {
			display: block;
			width: 100%;
		}

		.code-con .bottom {
			text-align: center;
			margin: 0.2rem 0 0.1rem;
		}

		.code-con .bottom span {
			display: inline-block;
			height: 0.42rem;
			line-height: 0.42rem;
			font-size: 0.2rem;
			color: #515151;
			padding-left: 0.44rem;
			background: url(static/icon/scan.png) no-repeat left center;
			background-size: 0.38rem;
		}

		.code-con .bottom span i {
			font-weight: bold !important;
		}

		.code-con .return {
			text-align: center;
		}

		.code-con .return:active {
			opacity: 0.6;
		}

		.code-con .return span {
			font-size: 0.2rem;
			color: #2691ff;
			display: inline-block;
			height: 0.6rem;
			line-height: 0.6rem;
			padding-left: 0.3rem;
			background: url(static/icon/return.png) no-repeat left center;
			background-size: 0.24rem;
		}

		/* 后面修改样式 */
		.pwd-form .form-lis {
			height: 0.6rem;
			width: 5.9rem;
			margin-bottom: 0.1rem;
		}

		.sub-btn {
			height: 0.7rem;
			width: 5.9rem;
			margin-top: 0.25rem;
		}

		.code-con .login-tit {
			line-height: 0.5rem;
		}

		.code-con .login-code {
			width: 2.4rem;
			height: 2.4rem;
		}

		.code-con .bottom {
			margin-bottom: 0;
		}

		.button-box {
			position: absolute;
			width: 100%;
			left: 0;
			text-align: center;
			bottom: -1rem;
		}

		.button-box button {
			padding: 0.2rem 0;
			width: 1.4rem;
			margin: 0 0.2rem;
			color: #fff;
			font-size: 0.3rem;
			background-color: #b1b1b1;
			border-radius: 0.1rem;
		}

		.button-box .active {
			background-color: #2691ff;
		}
	</style>
</head>

<body>
	<div class="login">
		<div class="login-con">
			<!-- 密码登录 -->
			<div class="pwd-con ">
				<div class="pwd-top">
					<div class="codelogin">
						<div class="txt" i18n="login.tag">扫码登录更安全</div>
					</div>
				</div>
				<div class="pwd-form">
					<form action="" method="post">
						<div class="form-lis form-select">
							<!-- 18583391708 -->
							<input type="text" i18n="login.placeholder.mobile" i18n-only="placeholder" class="phone"
								name="mobile" id="" value="18583391708" placeholder="请输入手机号" maxlength="11" />
						</div>
						<!-- 账号密码登录 -->
						<div class="form-lis form-lis-psd ">
							<!-- 123456 -->
							<input type="password" i18n="login.placeholder.password" i18n-only="placeholder"
								class="password" name="mobile-psd" id="" value="123456" placeholder="请输入密码" />
						</div>
						<div class="form-lis  form-lis-code">
							<input type="text" i18n="login.placeholder.code" i18n-only="placeholder" class="code"
								name="code" id="code" value="" placeholder="请输入验证码" />
							<div id="captcha" width="" height=""></div>
						</div>
						<div class="sub-btn" id="login-sub">
							<span i18n="login.btn.txt">登录</span>
						</div>
					</form>
				</div>
			</div>
			<!-- 扫码登录 -->
			<div class="code-con hidden">
				<div class="login-tit" i18n="login.tit">手机扫码，安全登录</div>
				<div class="login-code">
					<img src="">
				</div>
				<div class="bottom">
					<span i18n="login.open.app">打开<i>医疗考核APP</i>扫一扫登录</span>
				</div>
				<div class="return" i18n="login.return"><span>返回账号密码登录</span></div>
			</div>
			<!-- 切换按钮 -->
			<!-- <div class="button-box">
					<button type="button" class="chinese active">中文</button>
					<button type="button" class="english">English</button>
				</div> -->
		</div>
	</div>
	<script type="text/javascript" src="runtime/pub.js"></script>
	<script src="dist/i18n.js"></script>
	<script type="text/javascript" src="runtime/public/login.js"></script>
	<script src="lib/function/captcha.js" type="text/javascript" charset="utf-8"></script>
	<!-- <script>
			/*默认语言*/
			
			var cnBtn = document.querySelector(".chinese");
		
			cnBtn.addEventListener('click', function() {
					i18n("[i18n]", {
						lang: "cn",// 变更语言
						filePath: "i18n/",
						get: true
					});
					api.setGlobalData({
					    key: 'lang',
					    value: 'cn'
					});
				},
				false);
			/*切换为英文 - 按钮*/
			var enBtn = document.querySelector(".english");
			enBtn.addEventListener('click', function() {
					i18n("[i18n]", {
						lang: "en",
						filePath: "i18n/",
						get: true
					})
					api.setGlobalData({
					    key: 'lang',
					    value: 'en'
					});
					console.log("en===============")
					console.log(i18n.get("footer.about"));
				},
				false);
		</script> -->
</body>

</html>